<template>
  <div class="more">
    <!-- <div class="more_title">{{ $route.query.type === 'activity' ? '活动详情' : '招募通知详情'}}</div> -->
    <div class="activity_title">{{ detail.title || detail.name }}</div>
    <div class="activity_tip">作者：{{detail.author}}&nbsp;&nbsp;&nbsp;&nbsp;来源：小航家公益教育服务平台&nbsp;&nbsp;&nbsp;&nbsp;日期：{{moment(detail.dateCreated).format('YYYY-MM-DD HH:mm:ss')}}</div>
    <div v-html="detail.content" v-if="detail.content" class="px20 py20" ref="detailContent"></div>
    <!-- 视频 -->
    <div v-if="$route.query.type === 'video'" class="video_text">
      <video id="myVideo" class="video-js">
        <source :src="'/sysFile/fileShow?url=' + (detail.filePath && detail.filePath.replaceAll('\\', '/'))" type="video/mp4">
      </video>
    </div>
    <!-- 图片 -->
    <div v-if="$route.query.type === 'imgs'" style="text-align: center;" class="mt20">
      <img style="width: 100%;" :src="'/sysFile/fileShow?url=' + (detail.filePath && detail.filePath.replaceAll('\\', '/'))" />
    </div>
    <div v-if="$route.query.type === 'course'" class="pb20 px20">
      <div class="mb10">【家长志愿者招募与积分】</div>
      <a-table size="middle" :columns="columns" :dataSource="data" :pagination="false">
        <template slot="score" slot-scope="text, record">
          <div v-if="record.code === 'organize'">{{ detail.volunteerScore }}分</div>
          <div v-else>{{ text }}</div>
        </template>
      </a-table>
    </div>
    <div v-if="$route.query.type === 'course'" class="px20">
      <div class="mb10" style="font-size: 16px;font-weight: bold;">拓展了解</div>
      <a-spin tip="加载中..." :spinning="!desc" style="min-height: 200px;width: 100%;">
        <!-- <a-card style="width: 100%;border-radius: 10px;" v-for="(item, index) in questions" :key="index" class="mb10">
          <div slot="title"><a-icon type="info-circle" style="color: #fa8c16;" class="mr10" />{{ item[0] }}</div>
          <p>{{ item[1] }}</p>
        </a-card> -->
        <a-card style="width: 100%;border-radius: 10px;">
          <div v-html="desc" style="white-space:pre-wrap"></div>
        </a-card>
      </a-spin>
    </div>
    <div class="AIwenda" @click="AIwendaVisible = !AIwendaVisible"><i class="iconfont icon-AIwenda1"></i></div>
    <ai-wenda :visible="AIwendaVisible" @close="AIwendaVisible = false"></ai-wenda>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import AiWenda from '@/components/AiWenda/AiWenda'
import { activityDetail, getCourseDetail, introDetail, videoDetail, picDetail, aiPost } from '@/api/config'
export default {
  name: 'detail',
  components: { AiWenda },
  data () {
    return {
      AIwendaVisible: false,
      moment,
      detail: [],
      questions: [],
      columns: [
        {
          title: '项目',
          dataIndex: 'name',
          width: 100,
          key: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '人数',
          dataIndex: 'personNum',
          width: 50,
          key: 'personNum'
        },
        {
          title: '任务',
          dataIndex: 'task',
          width: 300,
          key: 'task'
        },
        {
          title: '奖励分',
          dataIndex: 'score',
          width: 100,
          key: 'score',
          scopedSlots: { customRender: 'score' }
        }
      ],
      data: [
        {
          id: 1,
          code: 'organize',
          name: '组织秩序（志愿者）',
          personNum: 1,
          task: '负责现场引导、签到、组织合影，维护现场秩序',
          score: '10分'
        },
        {
          id: 2,
          code: 'photo',
          name: '拍照',
          personNum: 1,
          task: '随队拍照，实时分享活动主要照片至会员群。活动后2天内将照片原图，按“精选”和“全部”分类上传到活动详情页“拍照”模块(文件命名为日期+活动主题+拍摄者姓名）',
          score: '5-15分（拍摄分享、上传、精选照片各5分）'
        },
        {
          id: 3,
          code: 'video',
          name: '摄像视频制作',
          personNum: 1,
          task: '现场拍摄并制作后期，实时分享至会员群。活动后2天内将视频原图，按“后期制作”和“全部”分类上传到活动详情页“摄像视频制作”模块(文件命名为日期+活动主题+拍摄者姓名）',
          score: '5-15分（分享、上传、后期制作各5分）'
        },
        {
          id: 4,
          code: 'contribution',
          name: '撰稿',
          personNum: 2,
          task: '新闻稿和感受稿各一篇，分别从总体综合角度、参与体验角度，以新闻稿体例撰写官方活动报道稿件，活动后3天内将新闻稿配图、标注图片作者后上传到活动详情页“撰稿”模块(文件命名为日期+活动主题+新闻稿）。',
          score: '新闻稿10-20分；感受稿10-20分。小朋友稿件采用后20分。'
        }
      ],
      desc: '',
      myPlayer: null
    }
  },
  computed: {
    ...mapState({
    })
  },
  async mounted () {
    if (this.$route.query.type === 'activity') {
      this.getActivityDetail()
    } else if (this.$route.query.type === 'course') {
      await this.getCourseDetail()
      // ai生成问题和答案
      this.getQuestion()
    } else if (this.$route.query.type === 'intro') {
      this.getIntroDetail()
    } else if (this.$route.query.type === 'video') {
      await this.getVideoDetail()
      this.initVideo() // 初始化视频播放器
    } else if (this.$route.query.type === 'imgs') {
      this.getImgsDetail()
    }
  },
  watch: {
  },
  destroyed () {
    this.myPlayer.dispose()
  },
  methods: {
    async getActivityDetail () {
      let res = await activityDetail({ id: this.$route.query.id })
      if (res.code === 200) {
        this.detail = res.data
      }
    },
    async getCourseDetail () {
      let res = await getCourseDetail({ id: this.$route.query.id })
      if (res.code === 200) {
        this.detail = res.data
      }
    },
    async getIntroDetail () {
      let res = await introDetail({ id: this.$route.query.id })
      if (res.code === 200) {
        this.detail = res.data
      }
    },
    async getVideoDetail () {
      let res = await videoDetail({ id: this.$route.query.id })
      if (res.code === 200) {
        this.detail = res.data
      }
    },
    async getImgsDetail () {
      let res = await picDetail({ id: this.$route.query.id })
      if (res.code === 200) {
        this.detail = res.data
      }
    },
    async getQuestion () {
      let context = `请根据${this.$refs.detailContent.innerText}，生成三个相关问题以及答案`
      console.info(this.$refs.detailContent.innerText)
      console.info(context)
      // TODO 此处可放开
      // let res = await aiPost({ context })
      let res = {
        code: 200,
        message: '成功',
        data: '问题1: 智能网联汽车通常利用哪些技术实现车辆间的通信？\n答案： 智能网联汽车通常使用专用短程通信（DSRC）和蜂窝网络（如4G/5G）技术来实现车辆与车辆（V2V）、车辆与基础设施（V2I）、车辆与行人（V2P）以及车辆与网络（V2N）之间的通信。\n\n问题2: 智能网联汽车的主要优点是什么？\n答案： 智能网联汽车的主要优点包括提高道路安全、减少交通拥堵、提升驾驶舒适性、降低能耗和排放，并支持新的出行服务和商业模式。通过实时信息交换和高级驾驶辅助系统，这些汽车能够预防交通事故、优化行车路线、提供紧急救援等。\n\n问题3: 智能网联汽车在隐私保护方面面临哪些挑战？\n答案： 智能网联汽车在隐私保护方面面临的挑战包括如何确保收集的大量个人和位置数据的安全，避免未经授权的数据访问或泄露，以及如何处理和存储这些数据以符合法律法规要求。此外，还需要平衡用户对个性化服务的需求与对隐私的保护，制定明确的隐私政策和用户同意机制。'
      }
      if (res.code === 200) {
        // let arr1 = res.data.split('1. ')[1].split('2. ')
        // let arr2 = arr1[1].split('3. ')
        // let arr3 =[arr1[0]].concat(arr2)
        // arr3.map(item => {
        //   return item.split('问题：')[1].split('答案：')
        // }).forEach(t => {
        //   this.questions.push(t)
        // })
        this.desc = res.data
        // console.info(this.questions)
      }
    },
    initVideo () { // 初始化视频方法
      this.myPlayer = this.$video('myVideo', {
        // 是否显示控制栏
        controls: true,
        // 是否自动播放,muted:静音播放
        autoplay: false,
        // 是否静音播放
        muted: false,
        // 是否流体自适应容器宽高
        fluid: true,
        // 设置视频播放器的显示宽度(以像素为单位)
        width: '800px',
        // 设置视频播放器的显示高度(以像素为单位)
        height: '40px'
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../styles/var.styl'
.more
  padding-bottom 30px
  width 1200px
  margin 0 auto
.activity_title
  text-align: center;
  font-weight: 600;
  color: #000;
  font-size: 20px;
  margin-bottom: 20px;
  // padding-top: 20px;
.activity_tip
  font-size: 14px;
  color: #666;
  padding-bottom: 20px
  border-bottom: 1px solid #e5e5e5;
.AIwenda
  position fixed
  bottom 100px
  right 0
  z-index 9998
  background #fff
  width 60px
  height 60px
  display flex
  justify-content center
  align-items center
  border-radius 30px
  cursor pointer
  .icon-AIwenda1
    font-size 30px
    color #00cc00
.video_text{
  width: 90%;
  margin: 20px auto;
}
video:focus{
  outline: 0; //去掉选中蓝框
}
.video-js .vjs-big-play-button{
  /*对播放按钮的样式进行设置*/
  width: 100px;
  height: 60px;
  position: absolute;
  top:50%;
  left: 50%;
  transform:translate3d(-50%,-50%,0);
}
</style>
